<template>
    <div>
        <form @submit.prevent="change(keywords)">
            <div class="searchArea">
                <div class="inputCover">
                    <i class="icon"></i>
                    <input type="text" class="search" v-model="keywords" @input="inputing=true">
                    <label class="holder" v-show="isShow">搜索歌曲、歌手、专辑</label>
                    <span class="close" v-show="!isShow" @click="close"><i></i></span>
                </div>
            </div>
        </form>
        <component :is='search' :keywords='keywords' @change="change"></component>
        <div class="searchHistory" v-if="search=='HotSearch'">
            <ul>
                <li v-for="(item,index) in history" :key="index"><i></i><div><span class="musicName" @click="change(item)">{{item}}</span><span class="delete iconfont iconclose" @click="deleteHistory(item)"></span></div></li>
            </ul>
        </div>
    </div>
</template>

<script>
import HotSearch from '@/components/HotSearch'
import SearchSuggest from '@/components/SearchSuggest'
import SearchResult from '@/components/SearchResult'
export default {
    data(){
        return{
            search: 'HotSearch',
            keywords: '',
            isShow: true,
            inputing: false,
            searchHistory: null,
            history: null
        }
    },
    components:{
        HotSearch,
        SearchSuggest,
        SearchResult
    },
    created(){
        this.getHistory();
    },
    methods:{
        // 搜索结果
        change(val){
            // console.log('change事件==>',val);
            this.keywords = val; //改变搜索关键词
            this.inputing = false;
            this.search = 'SearchResult'; //改变显示组件
            // 搜索记录
            if(this.searchHistory){
                this.searchHistory = this.searchHistory + ',' + this.keywords;
            }else{
                this.searchHistory =  this.keywords;
            }
            window.localStorage.setItem('searchHistory',this.searchHistory);
            this.getHistory();
        },
        close(){
            this.keywords = '';
        },
        getHistory(){
            this.searchHistory = window.localStorage.getItem('searchHistory');
            if(this.searchHistory){
                this.history = this.searchHistory.split(',');
                this.history = Array.from(new Set(this.history));
            }
        },
        deleteHistory(item){
            let index = this.history.indexOf(item);
            this.history.splice(index,1);
            window.localStorage.setItem('searchHistory',this.history);
            this.getHistory();
        }
    },
    watch:{
        // 输入结果 搜索建议词
        keywords(val){
            if(val==''){
                this.search = 'HotSearch';
                this.isShow = true;
            }else if(this.inputing){
                this.search = 'SearchSuggest';
                this.isShow = false;
            }else{
                this.isShow = false;
            }
        },
    }
}
</script>

<style lang="less" scoped>
.searchArea{
    padding: 15px 10px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    .inputCover{
        position: relative;
        width: 100%;
        height: 30px;
        padding: 0 30px;
        box-sizing: border-box;
        background: #ebecec;
        border-radius: 30px;
        .icon{
            width: 13px;
            height: 13px;
            position: absolute;
            left: 0;
            top: 9px;
            margin: 0 8px;
            vertical-align: middle;
            background-image: url();
        }
        .search{
            outline: 0;
            border: 0;
            width: 100%;
            height: 30px;
            line-height: 18px;
            background: rgba(0,0,0,0);
            font-size: 14px;
            color: #333;
        }
        .holder{
            position: absolute;
            left: 34px;
            top: 5px;
            font-size: 14px;
            color: #c9c9c9;
            background: rgba(0,0,0,0);
            pointer-events: none;
        }
        .close{
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 30px;
            line-height: 28px;
            text-align: center;
            i{
                display: inline-block;
                vertical-align: middle;
                width: 14px;
                height: 14px;
                background: url() no-repeat 0 0;
                background-size: contain;
            }
        }
    }
}
.searchHistory{
    margin-top: 20px;
    width: 100vw;
    height: 45px;
    ul{
        li{
            display: flex;
            align-items: center;
            width: 100vw;
            height: 45px;
            line-height: 45px;
            i{
                display: inline-block;
                margin: 0px 10px;
                width: 15px;
                height: 15px;
                background-image: url();
            }
            div{
                flex: 1;
                border-bottom: 1px solid rgba(0,0,0,.1);
                .musicName{
                    float: left;
                    width: 90%;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .delete{
                    width: 10%;
                    float: right;
                    cursor: pointer;
                    color: #dd001b;
                }
            }
        }
    }
}
</style>